<template>
  <div class="ComUpLoad">
    <div class="upload_title">
      可拆分Doc、htm、html、pdf、txt、mht、jpg、jpeg、bmp、png、zip格式的简历
      <p class="size">Doc、htm、html、pdf、txt、mht、jpg、jpeg、bmp、png文件大小限制：20M</p>
      <p class="size">zip文件大小限制：100M</p>
    </div>
    <div class="uploadFile">
      <a-upload-dragger
        class="upload_file"
        name="file"
        :multiple="true"
        :headers="{Authorization}"
        action="/jobboard/jobboardcandidates/hunter/upload"
        :beforeUpload="beforeUpload"
        :remove="removeFile"
        :fileList="fileList"
        @change="uploadChange">
        <p class="ant-upload-drag-icon">
          <a-icon type="upload" />
        </p>
        <p class="ant-upload-text">点击或拖拽文件到此处</p>
      </a-upload-dragger>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'ComUpLoad',
  props: [],
  data () {
    return {
      num: 0,
      fileList: []
    }
  },
  computed: {
    ...mapState({
      Authorization: function (state) {
        let token = state.common.loginInfo && state.common.loginInfo.token
        return token
      }
    })
  },
  created () {
  },
  methods: {
    loading (flag) {
      this.$emit('loading', flag)
    },
    uploadChange (info) {
      let status = info.file.status
      // this.SET_UPLOAD_BTN_LOADING(true)
      // this.SET_COPY_BTN_DISABLED(true)
      // this.SET_MANUAL_BTN_DISABLED(true)
      // this.SET_UPLOAD_TYPE(1)
      if (status && status !== 'uploading') {
        // this.createCandidate.uploadBtbLoading = false
        // this.createCandidate.uploadBtnDisabled = false
      }
      if (status === 'done') {
        this.loading(false)
        let data = JSON.parse(JSON.stringify(info.fileList))
        data = data.map(file => {
          return file.response
        })
        this.$emit('upFile', data)
        this.num++
      } else if (status === 'error') {
        this.loading(false)
        info.fileList = info.fileList.filter(item => item.uid !== info.file.uid)
      } else if (status === 'removed') {
        this.loading(false)
        // this.SET_UPLOAD_BTN_LOADING(false)
        // this.SET_COPY_BTN_DISABLED(false)
        // this.SET_MANUAL_BTN_DISABLED(false)
      }
    },
    beforeUpload (file, fileList) {
      this.loading(true)
      const reg = /\.(doc|docx|htm|html|pdf|PDF|txt|mht|jpg|jpeg|png|zip|DOC)(\?.*)?$/
      return new Promise((resolve, reject) => {
        if (reg.test(file.name)) {
          const isLt100M = file.size / 1024 / 1024 < 100
          if (!isLt100M) {
            this.$message.error(`${file.name}超过系统限制（100M），请选择其他文件`)
            return false
          }
          if (/\.(zip)(\?.*)?$/.test(file.name)) {
            // this.SET_IS_ZIP(true)
          } else {
            // this.SET_IS_ZIP(false)
          }
          this.fileList = [...this.fileList, file]
          resolve(file)
        } else {
          this.$message.error(`请上传正确格式的文件`)
          reject(new Error('请上传正确格式的文件'))
        }
      })
    },
    removeFile (file) {
      const index = this.fileList.findIndex(item => item.uid === file.uid)
      if (!this.fileList[index].error) {
        this.num--
      }
      this.fileList.splice(index, 1)
      let data = JSON.parse(JSON.stringify(this.fileList))
      data = data.map(file => {
        return file.response
      })
      this.$emit('upFile', data)
      return true
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../styles/var.styl'
.ComUpLoad
  display flex
  flex-direction column
  align-items center
  .upload_title
    width 100%
    border-bottom 1px solid borderColor
    padding 0 36px 24px
    margin-bottom 18px
    .size
      font-size 12px
      color #999
  :global(.ant-upload-list)
    margin-top 6px
    max-height 240px
    overflow auto
  :global(.ant-upload-list-item)
    margin-top 8px
    line-height 22px
    height auto
.uploadFile
  width 65%
  text-align center
  padding 0 0 24px
  :global(.ant-upload-list)
    margin-top 6px
    max-height 148px
    overflow auto
  :global(.ant-upload-list-item)
    margin-top 8px
    line-height 22px
    height auto
</style>
